<template>
  <div>
    <!-- <svg>
      <use xlink:href="#icon-fullscreen" />
    </svg> -->
    <!-- <svg-icon v-if="!isFullScreen" icon-class="fullscreen" style="fill:white;" @click="changeScreen" />
    <svg-icon v-else icon-class="exit-fullscreen" style="fill:white;" @click="changeScreen" /> -->

    <svg-icon :icon-class="isFullScreen?'exit-fullscreen':'fullscreen'" style="fill:white;" @click="changeScreen" />
  </div>
</template>

<script>
// import ScreenFull from 'screenfull'
export default {
  name: 'ScreenFull',
  data() {
    return {
      isFullScreen: false
    }
  },
  methods: {
    changeScreen() {
      if (!this.isFullScreen) {
        document.documentElement.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
      this.isFullScreen = !this.isFullScreen
    }
  }

}
</script>

<style scoped lang='scss'>

</style>
